<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">

    <!-- 

      相关背景：当我们需要在vue中修改视图时，我们并不希望直接修改它，这时我一般使用数据驱动的思想，通过数据的修改，来带动视图的改变。在网页中，用户一般通过相关事件的触发，来完成页面的交互

      问题：用户只能操作事件，而视图的改变只能通过数据的变化而产生改变，为了完成交互此时需要一个途径完成事件与数据之间的联系，而这种联系在JS中被称为事件的绑定，在vue中，我们使用指令v-on 来完成



     -->
    <h2>今天天气真的很{{isHot ? "炎热":"寒冷"}}</h2>
    <button v-on:click="changeWeather">改变天气</button>


    </div>
</body>
<script>

    Vue.config.productionTip = false; // 解决警告信息的

    const vm = new Vue({
      el: "#app",
      data() {
        return {

         isHot: true,
        //  changeWeather(){

            // alert("1");
            // console.log(this);
            /*

              当前环境下this指针的问题
              ① 当直接由原生事件调用时，指向window
              ② 当使用严格模式时，指向 null （提醒：当使用手脚架时，模块化会自动开启严格模式）
              ③ 此时要让this指针指向vm时，可以使用箭头函数，它的this可以由data函数传递为vm
            
              小结：如果非要在data中写事件的回调函数，那么只能写成回调函数，同时还有一个问题，数据与方法混合在一起不方便管理
              实际上data在设计之初就被设计为只存放数据的区域

              问题：函数（方法）应该被存放在哪里呢？
               vue构造函数的methods配置项中

            */ 
        //  }
        };
      },

      methods: {

         /*
          为什么可以使用呢，即v-on:click是如何找到回调函数的

          联想：data中的数据之所以可以被dom元素中的属性使用是应为它挂载到了vm实例上

          同样，v-on:click也只会跑到vm实例上去寻找它所需的函数，故而methods中的函数都被挂载到了vm实例上
          这也解释了，为啥此处的函数的this都指向了vm实例（实际上，插值语法区域都会跑到vm实例上去寻找它所需的东西）

          注：这里存放的是所有类型的函数，只要是项目需要的都被放在这里
          
          */ 


        changeWeather(){-

         
          console.log(this);
          this.isHot = !this.isHot;


        }
        
      },

    });
  </script>


</html>